<template>
  <Modal v-model="modal" title="添加房源" :closable="false" :mask-closable="false" :width='1000'>
    <template v-slot:footer>
      <div class="footer">
        <div style="flex: 1;" />
        <Button @click='hide'>取消</Button>
        <Button type="primary" @click='onOK' :disabled='selected.length <= 0'>添加</Button>
      </div>
    </template>

    <div class="commission">
      <dt-search ref="search" :xlBtn='4'></dt-search>

      <div class="total flex">
        <div>
          {{infoStr}}
        </div>
        <div>
          ！若房源无匹配佣金规则，则无法添加，无法导入，请先提交佣金规则审批
        </div>
      </div>
      
      <dt-grid ref="table" :page="{total}" :select='select' :onFetch='onFetch' :height='400' />
    </div>
  </Modal>

</template>

<script>
  import columnOpt from '../opt/room.js'
  import initiateMgr from '@/biz/commission/initiate.js'
  import searchOpt from '../opt/roomSearch.js'

  export default {
    watch: {
      selected: {
        handler(n) {
          let count = 0
          let area = 0
          let amount = 0
          n.forEach(item => {
            count++
            area += Number(item.area)
            amount += Number(item.totalPrice)
          })
          this.infoStr =
            `共${count}套房源，总面积${this.$dt.tool.formatterMoney(area)}㎡，总金额${this.$dt.tool.formatterMoney(amount)}元`
        },
        deep: true
      }
    },
    data() {
      return {
        modal: false,
        commissionId: null,
        searchInfo: {
          account: '0',
        },
        infoStr: '',
        total: 0,
        list: [],
        selected: [],
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              return row.isChoose
            }
          },
          one: (selection, row) => {
            if (selection.some(i => i.orderId == row.orderId)) {
              this.selected.push(row)
            } else {
              let idx = this.selected.findIndex(i => i.orderId == row.orderId)
              if (idx >= 0) {
                this.selected.splice(idx, 1)
              }
            }
          },
          all: (selection) => {
            let tmp = []
            if (selection.length > 0) {
              selection.forEach(item => {
                if (!this.selected.some(i => i.orderId == item.orderId)) {
                  tmp.push(item)
                }
              })
              this.selected = [...this.selected, ...tmp]
            } else {
              this.list.forEach(item => {
                let idx = this.selected.findIndex((i, idx) => i.orderId == item.orderId)
                if (idx >= 0) {
                  this.selected.splice(idx, 1)
                }
              })
            }
          }
        }
      }
    },
    methods: {
      show(detail) {
        this.commissionId = detail.commissionId
        this.modal = true
        this.$refs.search.init(this.$refs.table, searchOpt.options(this), this.searchInfo)
        this.$refs.table.init(this, {
          options: () => columnOpt.options(this, 1)
        }, this.searchInfo)
        this.$refs.table.fetch()
      },
      hide() {
        this.selected = []
        this.modal = false
      },
      onDetail(item) {
        ruleMgr.detail(item.ruleId)
      },
      onOpen(item) {
        this.$router.push({
          name: `room`,
          query: item,
        })
      },
      onOK() {
        initiateMgr.roomAdd(this.commissionId, this.selected.map(item => {
          return item.orderId
        })).then(res => {
          this.$emit('success')
          this.hide()
        })
      },
      findSelected() {
        let tmp = []
        this.list.forEach(item => {
          if (this.selected.some(i => i.orderId == item.orderId)) {
            tmp.push(item)
          }
        })
        this.$refs.table.selectRows(tmp)
      },
      onFetch(data) {
        data.commissionId = this.commissionId
        return initiateMgr.roomList(data).then(res => {
          this.list = res.settlementDetailRespPageInfo.list
          this.total = res.settlementDetailRespPageInfo.total
          this.findSelected()
          return this.list
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }

  .total {
    justify-content: space-between;
  }
</style>